<template>
  <div class="info">
    <div class="addprogram">
      <el-button type="primary" @click="addCLick()">新增标签</el-button>
    </div>
    <el-dialog :visible.sync="addDialog" :title='title' width="590px">
      <el-form ref="dataForm" :model="Tag">
        <el-form-item :label-width="formLabelWidth" label="标签名称">
          <el-input v-model="Tag.name" style="width:300px;"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelCLick()">取 消</el-button>
        <el-button type="primary" @click="createData()">保 存</el-button>
      </div>
    </el-dialog>
    <subtable :table-label="tableLabel" :table-data="tableData">
      <el-table-column slot="button" label="操作" min-width="10" align="center">
        <template slot-scope="scope">
          <el-button type="primary" @click="updateCLick(scope.row)">编辑</el-button>
          <el-button type="danger" @click="deleteCLick(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </subtable>
    <!-- 删除 -->
    <el-dialog :visible.sync="handleDelete" width="25%">
      <div style="width:100%;float:left;height:42px;">确定要删除吗?</div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="deleteData(deleteRow)">确定</el-button>
        <el-button @click="handleDelete = false">取消</el-button>
      </div>
    </el-dialog>
    <!-- 删除 -->
    <div class="foot">
      <ul>
        <li style="text-indent:20px;">1.课程和咨询设置时可以选择不同的标签，通过搜索标签找到网站内与这个标签相关的内容；</li>
        <li style="text-indent:20px;">2.可开启根据标签在课程介绍页显示相关课程的功能。</li>
      </ul>
    </div>
  </div>
</template>

<script>
  import Subtable from '@/components/Eltable'
  import {add, deleteTag, tagList, updateTag} from '@/api/subject/tag' // 数据接口
  import {getTenantId} from "@/utils/auth"

  export default {
    components: {
      Subtable
    },
    data() {
      return {
        formLabelWidth: '120px',
        addDialog: false,
        title: '',
        Tag: {
          name: ''
        },
        tableLabel: [
          {
            label: 'ID', width: '5', prop: 'id'
          }, {
            label: '名称', width: '20', prop: 'name'
          }, {
            label: '所属标签组', width: '10', prop: 'groupName'
          }, {
            label: '添加时间', width: '20', prop: 'createTimeTimeStr'
          }
        ],
        tableData: [],
        handleDelete: false,
        // 删除
        deleteRow: '',
        deleteCLick(row) {
          this.handleDelete = true
          this.deleteRow = row
        }
      }
    },
    created() {
      this.getData()
    },
    methods: {
      // 接口获取数据
      getData() {
        tagList(getTenantId()).then(response => {
          this.tableData = response.data.items
          this.total = response.data.items.length
          this.listFilter = response.data.items
        })
      },
      // 列表编辑按钮
      updateCLick(row) {
        this.addDialog = true
        this.title = '修改标签'
        this.Tag = Object.assign({}, row)
      },
      addCLick() {
        this.addDialog = true;
        this.Tag = {};
        this.title = '新增标签'
      },
      //取消
      cancelCLick() {
        this.addDialog = false;
        this.$refs.dataForm.resetFields();
      },
      createData() {
        this.addDialog = false
        this.$refs.dataForm.validate(valid => {
          if (valid) {
            this.Tag.tenantId = getTenantId()
            add(this.Tag).then(() => {
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              })
              this.getData()
            })
          }
        })
      },
      deleteData(row) {
        this.handleDelete = false
        deleteTag(row.id).then(() => {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
          this.getData()
        })
      }
    }
  }
</script>

<style lang="scss">
  .info {
    .el-dialog {
      border-radius: 6px;
    }

    .foot {
      margin-top: 20px;
      padding: 15px 15px;
      border-radius: 5px;
      background-color: #d9edf7;
      color: #326f8f;
      border-left: 5px solid #50bfff;

      ul {
        text-decoration: none;
        margin: 0;
        padding: 0;
        list-style: none;

        li {
          margin-top: 5px;
        }
      }
    }

    .addprogram {
      width: 100%;
      padding: 0 0 21px 0;
      height: 36px;

      .el-button {
        float: right;
      }
    }
  }
</style>
